<script>
export default {
    name: "ResumeArticleCard",
    props:{
        data:{
            type:Object,
            default(){
                return {
                    title:'深深的爱，淡淡的香',
                    summary:'一朵花，皎洁，素雅，渐渐地演变成了一幅画，印在了记忆的长河里。那花，叶细长，翠翠的，花开时，伸出一只长长的颈，花儿在',
                    updateTime:'2022-01-05',
                    banner:'/resume/index/log1.png',
                }
            }
        }
    }
}
</script>

<template>
    <div class="flex column main animate__animated animate__zoomIn">
        <img style="width: 100%;height: 200px" v-lazy="data.banner" alt="">
        <div style="width: 425px;margin: 15px;">
            <a class="title">{{data.title}}</a>
            <div style="line-height: 26px;color: #878787;white-space: normal;margin-top: 14px;font-size: 14px;">
                {{data.summary}}
            </div>
            <div style="line-height: 1.5;color: #999;display: inline-block;font-size: 14px;margin-top: 10px;">
                {{data.updateTime}}
            </div>
        </div>
    </div>
</template>

<style scoped>
.main{
    width: 455px;
    height: 350px;
    box-shadow:0 0 15px 0 rgba(0,0,0,.1);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.title{
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
}
.title:hover{
    color: rgb(255, 192, 1);
}
</style>
